<template>
  <view class="content">
    <!-- 导航栏 -->
    <headerView />
    <!-- banner -->
    <view class="absolute">
      <view class="titleView">
        <view class="titleView-text">About Us</view>
        <view class="titleView-span">
          Home /
          <text>About Us</text>
        </view>
      </view>
    </view>

    <!-- 关于我们 -->
    <view class="cardView">
      <view class="cardView-conter">
        <brandStory />
      </view>
    </view>

    <!-- 使命与愿景 -->
    <view class="cardView action">
      <view class="cardView-conter">
        <mission />
      </view>
    </view>

    <!-- 价值观 -->
    <view class="cardView">
      <view class="cardView-conter">
        <values />
      </view>
    </view>

    <!-- 底部导航 -->
    <footerView />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import headerView from "@/components/header/index.vue"; //导航
import footerView from "@/components/footer/index.vue"; //底部导航
import brandStory from "@/components/brandStory/index.vue"; //关于我们
import mission from "@/components/brandStory/mission.vue"; // 使命与愿景
import values from "@/components/brandStory/values.vue"; // 价值观
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;

  .absolute {
    width: 100%;
    height: 240px;
    background: url("https://picsum.photos/id/180/1920/800") no-repeat center
      center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(26, 54, 93, 0.6);
    }

    .titleView {
      width: auto;
      height: auto;
      position: relative;
      z-index: 2;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-text {
        font-size: 40px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 1.5;
      }

      &-span {
        font-size: 16px;
        display: flex;
        gap: 3px;
        margin: 0 auto;
        color: #fff;

        text {
          color: #b7922d;
        }
      }
    }
  }

  .cardView {
    width: 100%;
    height: auto;
    background-color: #fff;

    &.action {
      background-color: rgb(249, 250, 251);
    }

    &-conter {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 0;
      box-sizing: border-box;

      .elRow {
        width: 100%;
        margin: 0 auto !important;

        .elCol {
          margin-bottom: 20px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .cardView-conter {
    padding: 40px 20px !important;
  }
}
</style>
